2024 iThome 鐵人賽

DAY 8

Mobile Development

30天使用chatGPT輔助學習APP完成接案任務委託系列第 8 篇

[Day08] 經典起始範例：Hello World

16th鐵人賽 #react native

Tom Sir Coding bar

2024-09-22 18:39:25

492 瀏覽

分享至

昨天我們成功建立並啟動了 React Native 專案，今天不免俗氣的來一下寫程式的課程最一開始的萬年範例 「Hello World」

開始之前

對於沒寫過也沒經驗的人，我覺得最好的學習就是抄答案。先找到你想要的答案去試試看，可以動了在研究他是做了什麼，用了哪些東西讓他可以動。

在打開 APP的畫面中其實就是一個 RN的介紹教學。我們可以看到其實裡面有個Hello World 範例。

點進去看看，可以看到範例程式碼。

import React from 'react';
import {Text, View} from 'react-native';

const HelloWorldApp = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <Text>Hello, world!</Text>
    </View>
  );
};
export default HelloWorldApp;

果然是萬年起始範例。那這個要放在哪裡呢？

Hello World

實作

打開項目： 用 VS Code ，打開昨天建立的 React Native 專案。
資料夾結構如下：

MyNewProject/
├── android/
├── ios/
├── node_modules/
├── App.tsx  <-- 這是我們要修改的地方
└── package.json

修改 App.tsx：

打開 App.txs，會看到一排程式碼。不用太緊張，那就是一啓動的那個畫面的程式碼，我們可以大膽把 Hello Word 範例直接複製貼上上去。

就可以在模擬器的畫面看到 Hello World了，第一次修改程式成功了。

元件( Component)

在 React 和 React Native 開發中，元件（Component） 是最核心的概念之一。簡單來說，元件就像是應用程式中的「積木」，可以將應用的不同部分模組化，這樣每個部分都可以獨立開發、重複使用。

元件基本概念

元件是一個函數或Class：在 React 和 React Native 中，元件本質上是一個 JavaScript 函數或類。它們接收輸入（通常稱為 props）並返回要顯示的 UI 元素（通常是 JSX 語法）。
UI 的可重用部分：元件是一段可重用的 UI 代碼，它可以是頁面中的任何部分——按鈕、標題、表單甚至是整個頁面。每個元件可以單獨開發，並且可以在不同的地方重複使用，這使應用更具結構化且更容易維護。
將 UI 和邏輯封裝在一起：元件不僅負責顯示 UI，它還可以包含處理用戶交互的邏輯（如按鈕點擊、表單驗證等）。這樣可以讓代碼更具模組化，也能提升開發效率。

函數式元件：現代開發中更多使用的是函數式元件，這些元件是一個簡單的函數，接收 props 並返回 UI。

const HelloWorld = (props) => {
  return <Text>Hello, {props.name}!</Text>;
};

元件的組合

一個應用程式通常由很多元件組合而成，主元件可以引入其他元件，從而組成一個完整的 UI。

const App = () => {
  return (
    <View>
      <Header />
      <Content />
      <Footer />
    </View>
  );
};

在這裡，Header、Content 和 Footer 都是子元件，組合成一個完整的頁面。

修改 Hello World

我們把寫在 APP.tsx裡面的程式碼提出來並新增一個檔案 HelloWorld.tsx 於 components資料夾之下。

MyNewProject/
├── src/
│   ├── components/
│   │   └── HelloWorld.tsx  >>>> 新增的檔案
│   └── App.tsx
├── android/
├── ios/
└── package.json

HelloWorld.tsx

import React from 'react';
import {View, Text} from 'react-native';

const HelloWorld = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <Text>Hello, world!</Text>
    </View>
  );
};

export default HelloWorld;

APP.tsx

import React from 'react';
import HelloWorld from './src/components/HelloWorld';

const App = () => {
  return (
      <HelloWorld />
  );
};

export default App;

一樣可以在模擬器看到 Hello world。

樣式(style)

style 是用來設定元件的樣式，控制 UI 的外觀和排版。在 React Native 中，style 是以 JavaScript 對象的形式來處理的。網頁也可以使用 JavaScript，或是CSS。

在 React Native 中，會有兩個方式可以來寫 Style：Inline Style 和 StyleSheet.create()。

1. Inline Style（行內樣式）

寫法： 行內樣式是直接在元件上使用 style 屬性，並以 JavaScript 物件的方式定義樣式。

範例：

import React from 'react';
import { View, Text } from 'react-native';

const HelloWorldApp = () => {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text style={{ fontSize: 24 }}>Hello, world!</Text>
      </View>
    );
};

export default HelloWorldApp;

優點：

簡單直接：不需要額外的樣式表，直接在元件上設置，適合臨時修改或簡單樣式。

缺點：

難以維護：當元件樣式變得複雜時，行內樣式會讓程式碼變得難以維護，特別是在多個元件中重複使用相同的樣式。
效能較低：每次渲染元件時，行內樣式會被重新創建，這可能導致效能問題，特別是在大型應用中。

2. StyleSheet.create()

寫法： StyleSheet.create() 是 React Native 提供的專門處理樣式的 API，它會將樣式定義在一個集中化的樣式表中，並且只在元件中引用。

範例：

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const HelloWorldApp = () => {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Hello, world!</Text>
      </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    text: {
        fontSize: 24,
    },
});

export default HelloWorldApp;

優點：